<template>
  <div class="container">
    <!--    切换-->
    <el-tabs
      v-model="activeName"
      @tab-click="tabClick"
    >
      <el-tab-pane
        label="待审批"
        name="ing"
      >
      </el-tab-pane>
      <el-tab-pane
        label="已完成"
        name="complete"
      >
      </el-tab-pane>
      <el-tab-pane
        label="被拒绝"
        name="refuse"
      >
      </el-tab-pane>
    </el-tabs>
    <el-table
      :data="items"
      size="medium"
      @row-dblclick="dbClick"
      :height="parseInt($store.state.pageHeight)-355"
    >
      <el-table-column
        prop="no"
        align="center"
        label="审批编码"
      />
      <el-table-column
        prop="formEntity.projectName"
        align="center"
        label="项目名称"
      />
      <el-table-column
        prop="formEntity.principal"
        align="center"
        label="负责人"
      />
      <el-table-column
        prop="statusText"
        align="center"
        label="状态"
      />
      <el-table-column
        prop="startDate"
        align="center"
        label="开始时间"
      >
        <template slot-scope="scope">
          {{ scope.row.startDate?$_util.formatDate(scope.row.startDate):'----' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="endDate"
        align="center"
        label="结束时间"
      >
        <template slot-scope="scope">
          {{ scope.row.endDate?$_util.formatDate(scope.row.endDate):'----' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="totalDay"
        align="center"
        label="总耗时（天）"
      >
        <template slot-scope="scope">
          {{ [undefined,null].includes(scope.row.totalDay)?'----':scope.row.totalDay }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="view(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pre_page"
      :total-page="total_count"
      :current-page="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    />
    <el-dialog
      top="15px"
      title="进度详情"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="90%"
    >
      <Progressdetail
        :pid="currentId"
        @end="getItems"
      />
    </el-dialog>
  </div>
</template>

<script>
  import FooterPage from '@/component/common/FooterPage'
  import Progressdetail from './Progressdetail'
  export default {
    name: 'Page',
    components: {
      FooterPage,
      Progressdetail
    },
    data () {
      return {
        currentId: 0,
        dialogVisible: false,
        activeName: 'ing',
        items: [],
        search: {
        }
      }
    },
    created () {
      this.getItems()
    },
    activated () {
      if (this.$_isInit()) return
      this.getItems()
    },
    methods: {
      view (row) {
        this.dialogVisible = true
        this.currentId = row.id
      },
      tabClick () {
        this.page = 1
        this.getItems()
      },
      dbClick (row) {
        this.$router.push(`/approval/Progressdetail/${row.id}`)
      },
      searchData () {
        this.page = 1
        this.getItems()
      },
      async getItems () {
        const params = {
          page: this.page,
          pageSize: this.pre_page,
          filter: this.activeName,
          // taskNames: this.$store.state.formTypes.map(item => item.value),
          ...this.search
        }
        const { data } = await this.$service.gzl.progressList(params)
        this.items = data.data.records
        this.total_count = data.data.total
      },
      pageChange (page) {
        this.page = page
        this.getItems()
      },
      sizeChange (size) {
        this.pre_page = size
        this.getItems()
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 10px;
  }
</style>
